<!-- 岗位管理 -->
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { Plus as IconPlus, Download as IconDownload } from '@element-plus/icons-vue'
import type { IDbAction, IDbSearchConfig, IDbTable } from '@/types/global'
import useNotic from '@/hooks/useNotic'
import JobInfo from './comps/JobInfo.vue'

// 搜索栏配置
const searchConfig = reactive<IDbSearchConfig[]>([
  { label: '岗位编码', prop: 'code', type: 'input' },
  { label: '岗位名称', prop: 'name', type: 'input' },
  {
    label: '状态',
    prop: 'status',
    type: 'select',
    list: [
      { label: '正常', value: '1' },
      { label: '停用', value: '0' }
    ]
  }
])

// 表格数据
const tableData = reactive<IDbTable>({
  columns: [
    { label: '', prop: '', type: 'tableSelect', multiple: true, width: '60px' },
    { label: '岗位编号', prop: '', minWidth: '100px' },
    { label: '岗位编码', prop: '', minWidth: '100px' },
    { label: '岗位名称', prop: '', minWidth: '100px' },
    { label: '岗位排序', prop: '', minWidth: '100px' },
    { label: '状态', prop: '', minWidth: '100px' },
    { label: '创建时间', prop: '', minWidth: '100px' },
    { label: '操作', prop: 'handle', fixed: 'right', type: 'slot', width: '150px' }
  ],
  data: [{ name: 1 }, { name: 2 }, { name: 3 }],
  total: 0,
  search: {
    pageNum: 1,
    pageSize: 20
  }
})

// 弹窗数据
const jobInfoRef = ref<InstanceType<typeof JobInfo>>()
const dialogData = reactive({
  title: '', // 弹窗标题
  disabled: false // 是否禁用
})

getDataList()

/**
 * 获取表格数据
 */
function getDataList() {}
/**
 * 点击添加
 */
function addClick() {
  dialogData.title = '添加岗位'
  dialogData.disabled = false
  jobInfoRef.value?.init()
}
/**
 * 点击详情/编辑
 */
function infoClick(row: any, disabled: boolean) {
  dialogData.title = disabled ? '岗位详情' : '编辑岗位'
  dialogData.disabled = disabled
  jobInfoRef.value?.init()
}
/**
 * 点击删除
 */
function delClick(scoped: any) {
  useNotic().confirm(`您确定要删除第${scoped.$index + 1}个岗位吗？`, (flag) => {
    console.log(flag)
  })
}
/**
 * 导出
 */
function exportClick() {}
/**
 * 设置表格按钮
 */
function setBtnList(scoped: any) {
  const list: IDbAction[] = [
    { label: '详情', type: 'primary', show: true, onClick: () => infoClick(scoped.row, true) },
    { label: '编辑', type: 'primary', show: true, onClick: () => infoClick(scoped.row, false) },
    { label: '删除', type: 'danger', show: true, onClick: () => delClick(scoped) }
  ]
  return list
}
</script>

<template>
  <dui-page :search-config="searchConfig" :search-data="tableData.search" @search="getDataList">
    <template #btn>
      <el-button type="primary" :icon="IconPlus" @click="addClick">添加岗位</el-button>
      <el-button type="primary" :icon="IconDownload" @click="exportClick">导出</el-button>
    </template>
    <template #default>
      <dui-table
        :data="tableData.data"
        :columns="tableData.columns"
        :total="tableData.total"
        :search="tableData.search"
        @change="getDataList"
      >
        <template #handleSlot="scoped">
          <dui-action :list="setBtnList(scoped)" />
        </template>
      </dui-table>
      <!-- 详情弹窗 -->
      <JobInfo ref="jobInfoRef" v-bind="dialogData" />
    </template>
  </dui-page>
</template>
